<template>
  <view>
    <Card-item
      v-for="(i, k) in dataList"
      :key="k"
      :index="i.id"
      :image="i.cover_img"
      :title="i.title"
      :bold="false"
      :sub-title="i.introduction"
      :bm-line="false"
      @click="handleDetail"
    >
      <view slot="right" class="f-right">
        <view class="f-status" v-if="timeout(i.end_time)">已过期</view>
      </view>
    </Card-item>
    <u-loadmore :status="status" height="80rpx" />
  </view>
</template>

<script>
import CardItem from "@/components/CardItem/index";
import { homeTrendList } from "@/request/homeApi.js";
export default {
  components: { CardItem },
  data() {
    return {
      status: "nomore",
      total: 0, // 总数
      page: 1, // 页数
      dataList: [],
    };
  },
  onReachBottom() {
    if (this.total <= this.dataList.length) return;
    this.page++;
    this.getDataList();
  },
  created() {
    this.getDataList();
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.status = "loading";
      homeTrendList()
        .then((res) => {
          if (res.code == 1) {
            let list = res.data.list;
            this.dataList = this.page == 1 ? list : this.dataList.concat(list);
            this.total = res.data.total;
          }
        })
        .finally(() => {
          this.status = this.total > this.dataList.length ? "loadmore" : "nomore";
        });
    },
    // 检查是否过期
    timeout(e) {
      let end = Number(new Date(e + " 23:59:59"));
      let now = Number(new Date());
      return now > end;
    },
    // 查看详情
    handleDetail(val) {
      uni.navigateTo({ url: `/pages/home/trendsDetail?id=${val.id}` });
    },
  },
};
</script>

<style lang="scss" scoped>
.f-right {
  font-weight: 600;
  font-size: 28rpx;
  color: $active-color;
  margin-left: 20rpx;
  position: relative;
  text:nth-child(2) {
    font-size: 24rpx;
  }
  text:last-child {
    font-size: 40rpx;
  }
  .f-status {
    position: absolute;
    top: 60rpx;
    right: 0;
    color: #bababa;
    width: 80rpx;
    padding: 8rpx 20rpx;
    font-weight: normal;
    background-color: #f6f6fb;
    border-radius: 60rpx;
  }
}
</style>
